$(function () {
  //**************************************加载列表轮播图
  // 发送请求获取数据 封装
  function getList() {
    $.get('admin/swipers', function (res) {
      // 清空原来tbody内容
      $('tbody').html('')
      if (res.status == 0) {
        // console.log(res);
        $.each(res.data, function (i, item) {
          // 索引
          // console.log(i);
          // 每一个对象
          // console.log(item);
          let tr
          // 动态创建元素
          // 图片显示路径需要基准地址+后端规定的uploads/中间件路径+后端返回的图片名
          if (item.swiperstatus == 1) {
            // 在使用
            tr = $(`
          <tr>
                <td>${item.id}</td>
                <td>
                  <img src="${'http://127.0.0.1:8888/uploads/' + item.swiperimg}">
                </td>
                <td>${item.swiperlink}</td>
                <td>
                  <!-- 在使用 -->
                  <span class="layui-badge layui-bg-green" id='${item.id}' a='${item.swiperstatus}'>√</span>
                </td>
                <td>
                  <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete  del">
                删除
              </button>
                </td>
              </tr>
        `)
          } else {
            tr = `
             <tr>
                <td>${item.id}</td>
                <td>
                  <img src="${'http://127.0.0.1:8888/uploads/' + item.swiperimg}">
                </td>
                <td>${item.swiperlink}</td>
                <td>
                  <!-- 未使用 -->
                   <span class="layui-badge layui-bg-cyan" id='${item.id}'  a='${item.swiperstatus}'>×</span>
                </td>
                <td>
                  <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete del">
                删除
              </button>
                </td>
              </tr>
          `
          }
          // 从后添加
          $('tbody').append(tr)
        })
      } else {
        // 给用户提示信息
        layer.msg(res.message)
      }
    })
  }
  getList()




  // *************************************轮播图状态切换  使用还是未使用
  // 动态创建的标签用事件委托
  $('tbody').on('click', 'span', function () {
    // 获取自定义属性
    let id = $(this).attr('id')
    let a = $(this).attr('a')
    // console.log(id);
    // console.log(a);
    if (a == 1) {
      // 启用
      a = 2
      console.log(a);
    } else {
      // 禁用
      a = 1
      console.log(a);
    }
    // console.log($(this));
    $.ajax({
      type: 'PUT',
      url: `admin/swipers/${id}`,
      data: {
        status: a,
      },
      success: function (res) {
        // console.log(res.status);
        if (res.status == 0) {
          layer.msg(res.message)
          // 重新渲染
          getList()
        } else {
          layer.msg(res.message)
        }
      }
    })
  })







  // ***************************************删除操作
  $('body').on('click', '.del', function (e) {
    let tr = e.target.parentNode.parentNode
    let id = tr.firstElementChild.innerText
    console.log(id);
    layer.confirm('确实要删除吗？', function (index) {
      $.ajax({
        type: 'DELETE',
        url: `admin/swipers/` + id,
        success: function (res) {
          if (res.status === 0) {
            // 删除成功
            layer.msg('删除成功!');
            layer.close(index)
            getList()
          } else {
            layer.msg('删除失败!');
          }
        }
      })
    })
  })

  // ***************************************上传文件
  $('body').on('click', '#uploadSwiper', function () {
    $('#myfile').click()
  })
  // 监听文件选中事件
  $('body').on('change', '#myfile', function (e) {
    let files = e.target.files
    var fd = new FormData()
    $.each(files, function (index, item) {
      fd.append('swipers', item)
    })
    $.ajax({
      type: 'POST',
      url: 'admin/swipers',
      data: fd,
      processData: false,
      contentType: false,
      success: function (res) {
        if (res.status === 0) {
          layer.msg(res.message)
          getList()
        }
      }
    })

  })
})